<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品详情</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- <link
    href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css"
    rel="stylesheet"
  /> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      .row {
        margin-top: 50px;
      }
      img {
        width: 250px;
      }
      .col-md-8 {
        font-size: 25px;
        line-height: 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <img src="" alt="" id="pimg" />
        </div>
        <div class="col-md-8">
          <a href="/shopcar">我的购物车</a>
          <p>商品名： <span id="pname"></span></p>
          <p>价格： <span id="pprice"></span></p>
          <p>描述： <span id="pdesc"></span></p>
          <p>数量：<input type="number" name="" id="numIpt" value="1" /></p>
          <button class="btn btn-success" onclick="addToCar()">
            加入购物车
          </button>
          <button class="btn btn-primary">立即购买</button>
        </div>
      </div>
    </div>
  </body>
  <script>
    //根据pid获取到商品详情信息
    const params = new URLSearchParams(location.search);
    let pid = params.get("pid");
    console.log(pid);
    $.get("/doDetail/" + pid, (res) => {
      console.log(res);
      $("#pimg").attr("src", res.data.pimg);
      $("#pname").text(res.data.pname);
      $("#pprice").text(res.data.pprice);
      $("#pdesc").text(res.data.pdesc);
    });
    //添加商品到购物车
    let uid = localStorage.getItem("uid");
    function addToCar() {
      let params = {
        uid: uid,
        pid: pid,
        pname: $("#pname").text(),
        pprice: $("#pprice").text(),
        pdesc: $("#pdesc").text(),
        pimg: $("#pimg").attr("src"),
        num: $("#numIpt").val(),
      };
      console.log(params);
      //使用接口，加入购物车
      $.ajax({
        url: "/addTocar",
        type: "post",
        data: params,
        success: (res) => {
          console.log(res);
        },
      });
    }
  </script>
</html>
